<template>
	<view>
		<view style="left: 0%;top: 5%;position: fixed;width: 100vw;height: 15%; z-index: 99;background:#43464a;">
			<uni-search-bar v-model.lazy="keyword" @confirm="newSearch"></uni-search-bar>
			<uni-row >
				<uni-col style="margin-top: 0.7%;" :span="7" offset="1">
					<view>
						<uni-data-select
						        v-model="selectedType"
						        :localdata="type"
						      ></uni-data-select>
					</view>
				</uni-col > 	
					
				<uni-col  :span="6" offset="1">
					<view>
						<uni-tag class="tag" :circle="false" :text="selectWhat" type="default" @click="selectUser"/>
					</view>
				</uni-col>
				
				<uni-col  :span="8" offset="1">
					<view>
						<uni-tag class="tag" :circle="false" :text="getAddcount()" type="default" @click="selectAddtime()"/>
					</view>
				</uni-col>
				
			</uni-row>
		</view>
		<view style="margin-top: 27%;">
			<uni-list v-for="activity in activityList" >
				<uni-list-item>
					<template v-slot:body>
						<uni-card :title=activity.title :subTitle=activity.type padding="10px 0" margin="0px 0">
							<template v-slot:cover>
								<image style="left:20% width: 386px; height: 200px" mode="aspectFit" :src="activity.pic"></image>
							</template>
								<text>{{activity.info}}</text>
						</uni-card>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view>
			<uni-load-more :status=status @clickLoadMore="loadMore"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhMTEyMyIsImV4cCI6MTY3MDQ0MTg0MiwiaWF0IjoxNjcwNDIzODQyfQ.3UBHB24qYdNfJtMzN9e2s27X4IpHDFn2s3OeYQ6e0cvI5pRLTPXx9hQVejJGD28XSGBEX4XZKcOJkobr-imIsg",
				end:false,
				status:"more",
				pageNum:1,
				pageSize:5,
				count:0,
				keyword:"",
				type:[
					{value:"文体",text:"文体"},
					{value:"学术",text:"学术"},
					{value:"社交",text:"社交"},
					{value:"竞赛",text:"竞赛"}
				],
				selectedType:"",
				selectWhat:"查活动",
				addtimesSelect:0,
				activityList:[
					
				],
			}
		},
		watch:{
			selectedType(val){
				this.clear()
				this.newSearch()
			}
		},
		onPullDownRefresh(){
			this.clear();
			this.searchActivity();
		},
		onLoad(data) {
			this.keyword =data.keyword
			this.searchActivity()
		},
		methods: {
			clear(){
				this.end = false;
				this.status = "more";
				this.pageNum = 1;
				this.count = 0;
				this.activityList = [];
			},
			loadMore(){
				if(this.end)return;
				this.pageNum += 1;
				this.searchActivity();
			},
			selectUser(){
				if(this.selectWhat == "用户名"){
					this.selectWhat="查活动";}
				else {
					this.selectWhat = "用户名";
				}
			},
			getAddcount(){
				switch(this.addtimesSelect){
					case 0:return "添加人数";
					case 1:return "人数升序";
					case 2:return "人数降序";
				}
			},
			selectAddtime(){
				this.addtimesSelect = (this.addtimesSelect+1)%3;
				switch(this.addtimesSelect){
					case 0:this.newSearch();break;
					case 1:this.newSearch();break;
					case 2:this.newSearch();break;
				}
			},
			newSearch(){
				this.clear();
				this.searchActivity()
			},
			searchActivity(){
				let what = false;
				let sequence = false;
				let orderBy = "added_times";
				if(this.selectWhat == "用户名"){
					what = true;
				}
				switch(this.addtimesSelect){
					case 0: orderBy = "";break;
					case 1: sequence = true;break;
					case 2: sequence =false;break;
				}
				uni.request({
					method:'GET',
					url:'http://localhost:8080/activity',
					header:{
						Authorization : "Bearer " +this.token,
					},
					data:{
						'pageNum':this.pageNum,
						'pageSize':this.pageSize,
						'keyword':this.keyword,
						'type':this.selectedType,
						'orderBy':orderBy,
						'sequence':sequence,
						'byUsername':what,
						'state':12
					},			
					success: (res) => {
						console.log(res.data)
						let activities = res.data.records;
						let size =activities.length;
						for(let i =0;i<size;i++,this.count++){
							this.activityList.push({
								"id":activities[i].id,
								"title":activities[i].name,
								"info":activities[i].info,
								"type":activities[i].type,
								"pic":activities[i].pic1
							});
						}
						if(size<this.pageSize){
							this.end = true;
							this.status = "no-more";
						}
						console.log(this.selectedType)
						uni.stopPullDownRefresh()
					},
				})
			},
		}
	}
</script>

<style>
	.tag{
		line-height: 50px;
		font-size: 27px;
		font-weight: 200;
		padding: 4px 7px;
		border-width: 0.05rem;
	}
</style>
